@extends('admin_system.layout.layout')

@section('content')
    <div><button class="btn btn-default" style="float: right;margin-top:20px;" onclick="history.back();">返回</button></div>

    <div class="container" style="border:1px solid #ddd;border-top: none;width: 100%">
        <div class="col-lg-3 col-md-4 col-xs-6 thumb" style="margin-top: 20px;">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="{{$bannerInfo->banner_img or 'http://placehold.it/400x300'}}"
                     id="review">
            </a>
        </div>

        <div class="clearfix"></div>

        <div style="width: 110%">
            <div class="progress" style="margin-left: 15px;width: 30%;display: none">
                <div class="progress-bar progress-bar-striped active" role="progressbar"
                     aria-valuenow="20"
                     aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="progress_show">
                    <span class="sr-only">100% Complete</span>
                </div>
            </div>
        </div>

        <br>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="file" name="banner" id="upFile"
                       accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
            </div>
        </div>

        <div class="clearfix"></div>
        <br>
        <div class="form-group">
            <label for="inputID" class="col-sm-2 control-label">封面名称:</label>
            <div class="col-sm-4">
                <input type="text" name="banner_title" id="banner_title" class="form-control"
                       value="{{$bannerInfo->banner_title}}" required="required">
            </div>
        </div>

        <div class="clearfix"></div>
        <br>
        <div class="form-group">
            <label for="banner_type" class="col-sm-2 control-label">Banner类别</label>
            <div class="col-sm-4">
                <select name="banner_type" id="banner_type" class="form-control">
                    <option value="1" @if($bannerInfo->banner_type==1) selected @endif> 学习官Banner</option>
                    <option value="2" @if($bannerInfo->banner_type==2) selected @endif> 国政Banner</option>
                    <option value="appindex" @if($bannerInfo->banner_type=='appindex') selected @endif> app首页</option>
                </select>
            </div>
        </div>
        <div class="clearfix"></div>
        <br>
        <div class="form-group">
            <label for="content_type" class="col-sm-2 control-label">内容类别</label>
            <div class="col-sm-4">
                <select name="content_type" id="content_type" class="form-control">
                    <option value="video"
                            @if($bannerInfo->content_type=='video' or $bannerInfo->banner_type==null) selected @endif>
                        视频
                    </option>
                    <option value="article" @if($bannerInfo->content_type=='article') selected @endif> 文章</option>
                </select>
            </div>
        </div>

        <div class="clearfix"></div>
        <br>
        <div class="alert alert-danger col-md-6">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>注意 <i class="fa fa-exclamation-triangle"></i> !</strong>
            <p>国政Banner请输入的是文章课程的ID 即视频ID或者文章的ID</p>
            <p>学习官的课程 在下面搜索进行选中即可</p>
            <p>国政与学习官中只可以填写一个，填写两个将以学习官中心为准</p>

        </div>

        <div class="clearfix"></div>
        <br>
        <div class="form-group">
            <label for="content_type" class="col-sm-2 control-label">
                <button class="form-control btn-danger" id="guozheng">
                    国政的课程的ID点我
                </button>
            </label>
            <div class="col-sm-4">
                <input type="text" value="@if(!$lessons){{ $bannerInfo->content_id}}@endif" name="content_id"
                       id="content_id"
                       class="form-control">
            </div>
        </div>

        <div class="clearfix"></div>
        <div class="form-group" style="margin-top: 50px">
            <label for="inputID" class="col-sm-2 control-label text-info">选择课程的连接地址:</label>
            <div class="col-sm-4">
                <input type="text" placeholder="请输入课程的名称" id="search" class="form-control"
                       value="{{$lessons->title or null}}">
                <div id="serarch_preview">
                </div>
                <input type="hidden" name="lessonsId" id="lessonsId" value="{{$lessons->id or null}}">
            </div>
            <style>
                #serarch_preview li {
                    cursor: pointer;
                    width: 174px;
                }

                #serarch_preview li:hover {
                    background: grey;
                }
            </style>
        </div>
        <div class="clearfix"></div>
        &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-danger UpLoad"
                                        style="width: 30%;margin-top: 50px;margin-bottom: 50px">上传
        </button>
    </div>
    <div class="modal fade" id="modal-guozheng">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title text-center">国政课程选择</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="inputID" class="control-label">国政:</label>
                        <div class="">
                            <select name="" id="guo" class="form-control">
                                <option value="">视频</option>
                                @foreach($bookInfo as $k=>$v)
                                    <option style="margin-left: 30px" value="{{$v->BookID}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└&nbsp;{{$v->BookTitle}}</option>
                                @endforeach
                                <option value="">文章</option>
                                @foreach($mindshare as $k=>$v)
                                    <option style="margin-left: 30px" value="{{$v->MinSgaID}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└&nbsp;{{$v->MinSgaTitle}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="guochang">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <script>
        $(function () {
            $('#upFile').on('change', function (e) {
                var files = e.target.files;
                if (files && files.length > 0) {
                    var file = files[0];
                    var url = URL.createObjectURL(file);
                    $('#review').attr('src', url);
                }
            });
            var storage = window.localStorage;

            //用户搜索
            $('#search').on('input propertychange', function (e) {
                var str = '';
                var old = $(this).data('data');
                var currentData = e.target.value;
                if (old != currentData && currentData.length >= 2) {
                    $(this).data('data', e.target.value);
                    $.ajax({
                        url: '{{url("/admin_system/study/center/ajaxSearchResponse")}}',
                        type: 'get',
                        dataType: 'json',
                        data: {"query": currentData},
                        sync: false,
                        beforeSend: function () {
//                            console.log('努力加载中...')
                        },
                        success: function (data) {
                            if (data.suggestions.length > 2) {
                                storage.setItem('search', data.suggestions);
                                $.each(JSON.parse(data.suggestions), function (index, item) {
                                    if (index <= 5) {
                                        var patt = eval("/" + currentData + "/g");
                                        var checkdata = item.data;
                                        var res = patt.test(checkdata)
                                        if (res) {
                                            var reg = patt;
                                            var repl = checkdata;
                                            var cc = '<span style="color: red;">' + currentData + '</span>'
                                            var res = repl.replace(reg, cc)
                                            str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + res + '</li>';
                                        } else {
                                            str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + item.data + '</li>';
                                        }
                                    }
                                });
                                $('#serarch_preview').empty();
                                $('#serarch_preview').append(str);
                                str = '';
                            }
                        }
                    })
                } else if (currentData.length >= 2) {
                    var suggestions = storage.getItem('search');
                    if (suggestions.length > 2) {
                        $.each(JSON.parse(suggestions), function (index, item) {
                            if (index <= 5) {
                                var patt = eval("/" + currentData + "/g");
                                var checkdata = item.data;
                                var res = patt.test(checkdata)
                                if (res) {
                                    var reg = patt;
                                    var repl = checkdata;
                                    var cc = '<span style="color: red;">' + currentData + '</span>'
                                    var res = repl.replace(reg, cc)
                                    str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + res + '</li>';
                                } else {
                                    str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + item.data + '</li>';
                                }
                            }
                        });
                        $('#serarch_preview').empty();
                        $('#serarch_preview').append(str);
                        str = '';
                    }
                }
            });

            //用户点击上传功能
            $('.UpLoad').click(function () {
                //禁止用户重复上传
                $('.UpLoad').attr('disabled', 'disabled').text('正在上传中');

                var file = $('#upFile')[0].files[0];
                var lessons_id = $('#lessonsId').val();
                var banner_title = $('#banner_title').val();
                var banner_id = '{{$bannerInfo->id}}';
                var banner_type = $('#banner_type option:selected').val();
                var content_type = $('#content_type option:selected').val();
                var content_id = $('#content_id').val();

                var _token = $('meta[name="csrf-token"]').attr('content');
                //FormData对象
                var fd = new FormData();
                fd.append('banner_img', file);
                fd.append('lessons_id', lessons_id);
                fd.append('banner_id', banner_id);
                fd.append('banner_title', banner_title);
                fd.append('banner_type', banner_type);
                fd.append('content_type', content_type);
                fd.append('content_id', content_id);
                fd.append('_token', _token);


                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {//上传状态
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        var res = JSON.parse(xhr.response);
                        if (res.code == 400) {
                            notify_message(res.msg, 'danger');
                        } else if (res.code == 200) {
                            //跳转到banner列表页

                            notify_message(res.msg, 'success');
                        }
                    }  else if (xhr.readyState == 2 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        notify_message('请求已接收', 'info');
                    } else if (xhr.readyState == 2 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        notify_message('请求处理中', 'info');
                    }
                }

                xhr.upload.onprogress = function (e) {//获取进度
                    var loaded = e.loaded;
                    var tot = e.total;
                    var pre = Math.floor(100 * loaded / tot);
                    $('.progress').css('display', 'block');
                    $('.progress-bar').stop().animate({'width': pre + '%'});
//                    console.log(pre);
                }
                xhr.open('post', "{{route('banner_update')}}")
                xhr.send(fd);
            });
        })

        var userSelect = function (_this) {
            var lessonsId = $(_this).attr('lessonsid');
            $('#lessonsId').val(lessonsId)
            $('#search').val($(_this).attr('content'))
            $('#serarch_preview').empty();
        }

        function notify_message(message, type) {

            $.notify({
                icon: 'fa fa-paw',
                message: message,
            }, {
                type: type,
                animate: {
                    enter: "animated fadeInDown",
                    exit: "animated fadeOutUp"
                }
            })
        }

        $('#guozheng').on('click', function () {
            $('#modal-guozheng').modal('show');
        })

        $('#guochang').on('click',function(){
            var content_id=$('#guo option:selected').val();
            $('#content_id').val(content_id);
        })
    </script>
@stop
